<script>
import * as DateUtil from '@/components/util/DateUtil'
import * as XLSX from "xlsx";
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      demo: {
        text: '{{meterCode::property}}',
        textOne: '{{7022::value}}',
        textTwo: '{{7022::value}}+{{7020::value}}'
      },
      templateInfo: {
        selected: {},
        list: []
      },
      datePick: {
        from: new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 7),
        end: new Date()
      },
      excelTable: {
        list: []
      }
    }
  },
  mounted() {
    this.fetchBaseData()
  },
  created() {
  },
  methods: {
    fetchBaseData: function () {
      this.$axios({url:'/ems/client/base/report/template/list',data: {content:{}}}).then((content) => {
        this.templateInfo.list = content.list
      });
    },
    createHtmlExcel: function () {
      if (!this.templateInfo.selected.id) {
        window.___vue.$message.warning('选择模板')
        return
      }
      const fromDate = DateUtil.getTimeInfo(this.datePick.from).toDay + ' 00:00:00';
      const toDate = DateUtil.getTimeInfo(this.datePick.end).toDay + ' 23:59:59';
      const param = {
        content: {
          fromDate: fromDate,
          toDate: toDate,
          reportTemplateId: this.templateInfo.selected.id
        }
      }
      this.$axios({url:'/ems/client/energy/report/template/excel',data: param}).then((content) => {
        this.excelTable.list = content.list
      });
    },
    exportExcel: function () {
      const table = document.getElementById('excelTable');
      const ws = XLSX.utils.table_to_sheet(table)
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      XLSX.writeFile(wb, '能耗统计报表_' + new Date().getTime()+ ".xlsx");
    }
  }
}
</script>
<template>
  <el-row>
    <el-col :span="6">
      开始时间： <el-date-picker v-model="datePick.from" type="date" placeholder="开始时间"></el-date-picker><br><br>
      结束时间： <el-date-picker v-model="datePick.end" type="date" placeholder="结束时间"></el-date-picker><br><br>
      选择模板： <el-select v-model="templateInfo.selected.id" filterable placeholder="请选择">
      <el-option v-for="item in templateInfo.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select><br><br>
      <el-button type="primary" @click="createHtmlExcel">生成报表</el-button><br><br>
      使用说明：<br><br>
      动态参数使用规范：{{ demo.text }}<br><br>
      动态参数使用规则：支持 + - * / 运算<br><br>
      meterCode：仪表编码（见：仪表信息管理）<br><br>
      property：属性，可选值value、lastValue、firstValue<br><br>
      1）value：指定时间内电表增量<br><br>
      2）firstValue：指定时间内电表第一次读数<br><br>
      3）lastValue：指定时间内电表最后一次读数<br><br>
      完整示例：<br><br>
      1）{{demo.textOne}} 即获取编码为7022仪表指定时间段增量<br><br>
      1）{{demo.textTwo}} 即获取编码为7022仪表和7022仪表指定时间段增量和<br><br>
    </el-col>
    <el-col :span="18">
      <template v-if="excelTable.list.length > 1">
        <el-row>
          <el-col :span="24" style="text-align: right;">
            <el-button type="primary" @click="exportExcel">下载报表</el-button>
          </el-col>
        </el-row>
        <el-row>
          <table style="width: 100%;border: 1px solid black;border-collapse: collapse;margin-top: 10px;" id="excelTable">
            <tr v-for="(items, index) in excelTable.list" :key="index">
              <template v-for="(v, i) in items">
                <td
                    v-if="!v.isBlank"
                    :key="index + '-' + i"
                    :style="'background-color: rgb(' + v.bgColor.red + ', ' + v.bgColor.green + ', ' + v.bgColor.blue + ');text-align:' + v.align"
                    :colspan="v.colspan > 1 ? v.colspan: null"
                    :rowspan="v.rowspan > 1 ? v.rowspan: null"> {{v.value}} </td>
              </template>
            </tr>
          </table>
        </el-row>
      </template>
    </el-col>
  </el-row>
</template>
<style>
#excelTable td {
  border: 1px solid black;
  line-height: 30px;
  padding: 0px 5px;
}
</style>
